<template>
  <div>
    <div style="text-align:center;margin-top:5px;margin-bottom: 10px;">
      <el-input v-model="keywords" @change="searchName" placeholder="请输入番名查询" style="width: 25%;"></el-input>
    </div>
    <el-row>
      <el-col :push="1" :span="4" v-for="(fanju, index) in fanjuList" :key="index" style="height: 200px;">
        <div>
          <img :src="fanju.cover" style="width: 140px;height: 150px;border: 1px;" @click="detail(fanju)" />
        </div>
        <el-link :href="`https://www.bilibili.com/video/${fanju.designation}`" target="_blank">{{ fanju.name }}</el-link>
      </el-col>
    </el-row>
    <el-pagination background @current-change="handleCurrentChange($event)" :current-page=pageInfo.currentPage
      :page-size=pageInfo.pageSize :page-count="5" :shide-on-single-page=true layout="total, prev, pager, next, jumper"
      :total=pageInfo.total style="text-align: center;">
    </el-pagination>
  </div>
</template>
<script>
import { getAllFanju } from '../../api/fanju'
export default {
  name: 'CartoonItem',
  data() {
    return {
      str: 'hello',
      fanjuList: [],
      keywords: '',
      pageInfo: {
        total: 0,
        pageSize: 18,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.getAll(null)
  },
  methods: {
    detail(fanju) {
      this.$router.push({
        path: '/fanjuItem',
        query:fanju
      })
    },
    searchName() {
      this.pageInfo.currentPage = 1
      this.getAll()
    },
    handleCurrentChange(value) {
      this.pageInfo.currentPage = value
      //传递当前每页大小
      this.getAll()
    },
    getAll(params) {
      if (params == null) {
        params = {
          "currentPage": this.pageInfo.currentPage,
          "pageSize": this.pageInfo.pageSize,
          "keywords": this.keywords
        }
      }
      getAllFanju(params).then(res => {
        console.log("发送了后端请求")
        if (res.code === 0) {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return
        }
        this.fanjuList = res.data.data.records
        this.pageInfo.total = res.data.data.total
      }).catch(error => {
        this.$message({
          type: 'error',
          message: '请求接口出错'
        })
      })
    }
  }
}  
</script>
<style scoped>
.row1 {
  height: 200px;
}
</style>